<template>
  <el-row>
    <el-col :span="24">
      <el-carousel height="640px" arrow="always" indicator-position="">
        <el-carousel-item v-for="item in picHome" :key="item">
            <el-image style="width: 100%; height: 100%;" :src="item" />
        </el-carousel-item>
      </el-carousel>
    </el-col>
  </el-row>
  <el-row class="product-title" >
    <el-col :span="24" style="padding-top: 8%; padding-bottom: 8%;">
        <div>
          <el-text class="product-title-zh">厨房产品</el-text>
        </div>
        <div>
          <el-text class="product-title-en">KITCHEN PRODUCTS</el-text>
        </div>
    </el-col>
  </el-row>
  <el-row class="product" >
    <el-col :span="5" v-for="item in category" :key="item">
      <HoverImg :imageUrl="item.pic" :specText="item.specText" :specImgUrl="item.specImgUrl" :title="item.title"/>
    </el-col>
  </el-row>
  
  <el-row>
    <el-col>
      <el-carousel height="1024px" arrow="always" indicator-position="" :interval="3000">
        <el-carousel-item v-for="item in product" :key="item">
            <el-row class="product-recommend" >
              <el-col :span="11">
                <el-image class="product-pic" :src="item.pic"/>
              </el-col>
              <el-col :span="13">
                  <p class="recommend-title">产品推荐</p>
                  <p class="recommend-product">{{ item.product }}</p>
                  <p class="recommend-type">{{ item.type }}</p>
                  <div>
                    <ul class="recommend-list" >
                      <li v-for="i in item.recommend" :key="i">{{ i }}</li>
                    </ul>
                  </div>
                  <div>
                    <RedButton text="了解更多" link="#" />
                  </div>
              </el-col>
            </el-row>
        </el-carousel-item>
      </el-carousel>
    </el-col>
  </el-row>
  
  <el-row class="ads">
    <el-image :src="ad1.pic"/>
    <div class="ads-btn1">
      <RedButton  text="了解更多" link="#" />
    </div>
  </el-row>
  <el-row class="ads">
    <el-image :src="ad2.pic"/>
    <div class="ads-btn2">
      <RedButton  text="了解更多" link="#" />
    </div>
  </el-row>
  <FooterContent />
</template>

<script>
import picHomeT1 from '~/assets/home-t1.jpg'
import picHomeT2 from '~/assets/home-t2.png'
import picHomeT3 from '~/assets/home-t3.png'
import picTest1 from '~/assets/test1.png'
import picTest2 from '~/assets/vue.svg'
import HoverImg from './HoverImg.vue'
import RedButton from './RedButton.vue'

export default {
  name: 'Home',
  components: {
  },
  data() {
    return {
      picHome: [picHomeT1, picHomeT2, picHomeT3],
      category:[],
      product:[],
      ad1:{},
      ad2:{},
      picTest1,picTest2
    }
  },
  methods: {
    async getCategories() {
      return [
        {
          pic:'src/assets/home-p1.jpg',
          title:'烹饪',
          specText:"daogrs了解温度对美食口感的每个细微影响，带来非比寻常的烹饪体验，daogrs对美食的追求是一生放不下的执念。",
          specImgUrl:'src/assets/p1-icon.png'
        },
        {
          pic:'src/assets/home-p2.jpg',
          title:'洗涤',
          specText:"daogrs以独特的智能科技，不断创新去污存储新技术，为每一位追求极致的家庭而服务，考虑洗碗的每一个细节。",
          specImgUrl:'src/assets/p2-icon.png'
        },
        {
          pic:'src/assets/home-p3.jpg',
          title:'冷藏',
          specText:"daogrs用尖端的恒温制冷技术，达到精准控温和锁鲜的目的，为您的食材提供最佳的存储条件，让食物长久保鲜。",
          specImgUrl:'src/assets/p3-icon.png'
        },
        {
          pic:'src/assets/home-p4.jpg',
          title:'净化',
          specText:"daogrs可根据需求任意调节水温，细心照顾每一个用水用户，更高的过滤标准，让健康饮水成为生活必须品，轻松净享水质健康生活。",
          specImgUrl:'src/assets/p4-icon.png'
        },
        {
          pic:'src/assets/home-p5.jpg',
          title:'护理',
          specText:"daogrs用心呵护衣物每一处，让衣物时刻焕然一新，确保心爱的衣物轻松实现抗皱防护，还原纤维柔软与质感。",
          specImgUrl:'src/assets/p5-icon.png'
        }
      ]
    },
    async getProducts() {
      return [
        {
          pic:'src/assets/prdv9.png',
          product:'嵌入式净饮一体机',
          type:'V9',
          recommend:[
            '冰气泡水直饮机',
            'PF精确过滤系统',
            '无水箱即滤技术'
          ]
        },
        {
          pic:'src/assets/prds10b.png',
          product:'嵌入式蒸烤箱',
          type:'S10b',
          recommend:[
            '无拉手电动开门',
            '上下独立温控',
            '60L大容量'
          ]
        },
        {
          pic:'src/assets/prdld5v.png',
          product:'洗烘组合',
          type:'LD5V',
          recommend:[
            '12kg洗涤容量 10kg烘干容量',
            'BLDC变频电机',
            '衣物智能感应'
          ]
        },
        {
          pic:'src/assets/prdk7.png',
          product:'嵌入式冰箱酒柜组合',
          type:'K7xss Pro Max',
          recommend:[
            '意大利不锈钢面板',
            '无拉手电动开门',
            '酒柜双温区独立储存'
          ]
        }
      ]
    },
    async getAd1() {
      return {
          pic: 'src/assets/ad1.jpg',
          url:''
        }
    },
    async getAd2(){
      return {
          pic: 'src/assets/ad2.jpg',
          url:''
        }
    }
  },
  async mounted() {
    this.category = await this.getCategories();
    this.product = await this.getProducts();
    this.ad1 = await this.getAd1();
    this.ad2 = await this.getAd2();
  }
}


</script>
<style scoped>
.product-title {
  height: 500.817px;
  background-color: var(--dg-bg-color);
}
.product-title .product-title-zh {
  --ep-text-color: #fff;
  font-size: 2.3rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 1rem;
  letter-spacing: 10px;
  font-family: Futura_Light_BT,sy;
}
.product-title .product-title-en {
  --ep-text-color: #fff;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 1rem;
  letter-spacing: 10px;
}

.product{
  height: 615.383px;
}

.product .ep-col-5 {
  max-width: 20%;
  flex: 0 0 20%;
}

.product-recommend {
  height: 100%;
  text-align: left;
  background-color: var(--dg-bg-color);
  margin-top: 10% ;
  margin-bottom: 10%;
}

.product-recommend .product-pic{
  width: 45%;
  margin-left: 30%;
  margin-top: 15%;
}

.product-recommend .recommend-title {
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.5;
  margin:2% 0 2% 0;
  color: var(--dg-text-color-primary);
}

.product-recommend .recommend-product {
  font-size: 1.5rem;
  font-weight: 400;
  color: rgb(212, 212, 212);
  margin: 0 !important;
}

.product-recommend .recommend-type {
  font-size: 1.725rem;
  margin-bottom: 2rem !important;
  margin-top: 0;
  color: var(--dg-text-color-primary);
}

.recommend-list{
  color: rgb(194, 194, 194);
  font-size: 1.2rem;
  margin:1rem 0 4rem 0;
  list-style: none;
  padding: 0;
}

.recommend-list li{
  line-height: 2.3rem;
}


.product-recommend .recommend-list li::before {
  content: "\2022";
  margin-right: .4rem;
  color: rgb(231, 31, 24);
}

.ads-btn1 {
  position: absolute;
  top: 68%;
  padding: 0 8%;
}

.ads-btn2{
  position: absolute;
  top: 55%;
  padding: 0 8%;
}


</style>